<script setup>
import { ref, computed, onMounted } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';

const employeeId = ref('');
const password = ref('');
const backgroundUrl = ref('');
const router = useRouter();

const backgroundStyle = computed(() => {
  return backgroundUrl.value
    ? { backgroundImage: `url('${backgroundUrl.value}')` }
    : {};
});

async function fetchBackground() {
  try {
    // 1. 发送请求，等待返回
    const res = await axios.get('http://localhost:8080/login/background');
    // 2. 打印返回值，便于调试
    console.log('背景图片返回值:', res);
    // 3. 判断返回值结构，提取图片地址
    if (res.data.code === 200) {
      backgroundUrl.value = res.data.data;
    } else {
      backgroundUrl.value = '';
    }
    console.log('最终背景图片地址:', backgroundUrl.value);
  } catch (error) {
    // 4. 捕获异常，处理错误
    console.error('获取背景图片失败:', error);
    backgroundUrl.value = '';
  }
}

onMounted(() => {
  fetchBackground();
});

async function handleLogin() {
  if (!employeeId.value || !password.value) {
    alert('请输入员工编号和密码');
    return;
  }
  try {
    const res = await axios.post(
      'http://localhost:8080/login',
      {
        employeeId: employeeId.value,
        password: password.value
      },
      {
        headers: {
          'Content-Type': 'application/json'
        }
      }
    );
    console.log(res);
    const { token, empRole,empId,departmentId} = res.data.data;
    if (res.data.code === 200) {
      localStorage.setItem('token', token);
      localStorage.setItem('employeeId', empId);
      localStorage.setItem('empRole',empRole);
      localStorage.setItem('departmentId',departmentId)
      // 根据角色跳转
      if (empRole === 3) {
        router.push('/administrator/home');
      } else if (empRole === 2) {
        router.push('/assessor/home');
      } else if (empRole === 1) {
        router.push('/employee/home');
      } else {
        alert('未知角色');
      }
    } else {
      alert('登录失败');
    }
  } catch (error) {
    alert('登录请求失败');
  }
}

function goRegister() {
  router.push('/login2');
}

</script>
<template>
  <div class="login-container" :style="backgroundStyle">
    <div class="login-box">
      <form @submit.prevent="handleLogin">
        <div class="form-group">
          <label for="employeeId">员工编号</label>
          <input id="employeeId" v-model="employeeId" type="text" placeholder="请输入员工编号" required />
        </div>
        <div class="form-group">
          <label for="password">密码</label>
          <input id="password" v-model="password" type="password" placeholder="请输入密码" required />
        </div>
        <button type="submit">登录</button>
        <button type="button" @click="goRegister" class="register-btn">注册</button>
      </form>
    </div>
  </div>
</template>

<style scoped>
.login-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.login-box {
  position: absolute;
  right: 10vw;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  padding: 40px 30px 30px 30px;
  border-radius: 10px;
  min-width: 320px;
  color: #fff;
}
.form-group {
  margin-bottom: 32px;
}
label {
  display: block;
  margin-bottom: 6px;
  font-weight: bold;
  color: #fff;
}
input {
  width: 100%;
  padding: 8px 10px 8px 0;
  border: none;
  border-bottom: 2px solid #fff;
  border-radius: 0;
  font-size: 18px;
  background: transparent;
  color: #fff;
  outline: none;
  transition: border-color 0.2s;
}
input:focus {
  border-bottom: 2.5px solid #409eff;
}
button {
  width: 100%;
  padding: 0;
  background: none;
  color: #fff;
  border: none;
  border-radius: 0;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 10px;
  box-shadow: none;
  transition: color 0.2s;
  text-align: center;
}
button:hover {
  color: #409eff;
  background: none;
}
.login-box input::placeholder {
  color: #eee;
}
.register-btn {
  margin-top: 16px;
  font-size: 18px;
  color: #409eff;
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: center;
}
.register-btn:hover {
  text-decoration: underline;
}
</style>
